<template>
    <scroller class="page">
        <div class="block">
            <div class="user-info-box">
                <image class="avatar" resize="cover" :src="userInfo.avatarUrl"></image>
                <div class="user-info">
                    <text class="user-name">{{ userInfo.nickName }}</text>
                    <text class="user-mobile">绑定手机</text>
                </div>
            </div>
            <div class="user-orders">
                <div class="user-orders-item" @click="goOrderList">
                    <text class="user-orders-count">{{ userInfo.orderCount }}</text>
                    <text class="user-orders-item-text">订单</text>
                </div>
                <div class="divider"></div>
                <div class="user-orders-item" @click="goFavorite">
                    <text class="user-orders-count">{{ userInfo.favoriteCount }}</text>
                    <text class="user-orders-item-text">收藏</text>
                </div>
            </div>
        </div>
        <div class="block" @click="cart">
            <text class="block-title">我的购物车</text>
        </div>
        <div class="block" @click="address">
            <text class="block-title">我的收货地址</text>
        </div>
        <div class="block">
            <text class="block-title">联系客服</text>
        </div>
        <div class="block" @click="showWeb">
            <text class="block-title">关于我们</text>
        </div>
        <Footer />
        <!-- <Toolbar /> -->
    </scroller>
</template>
<script>
// import Toolbar from '@/components/Toolbar';
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const event = weex.requireModule('event');
const authChannel = new BroadcastChannel('auth');
export default {
    name: 'App',
    components: {
        // Toolbar,
        Footer
    },
    data() {
        return {
            userInfo: {}
        }
    },
    mounted() {
        event.initData(JSON.stringify({ 'title': '用户中心' }), json => {
            if (utils.checkToken()) {
                this.init();
                console.log('cart login suc1')
            } else {
                console.log('cart login fail1')
            }
        })
        event.initLife("index", function(json) {
          console.log('helo cart')
            if (utils.checkToken()) {
                this.init();
                console.log('cart login suc')
            } else {
                console.log('cart login fail')
            }
        })

        // 收到成功登录信息时刷新页面
        authChannel.onmessage = event => {
            this.init();
        }
    },
    methods: {
        init() {
            var url = '/yq/user';
            var params = {};
            var success = res => {
                console.log(res);
                this.userInfo = res.info;
            }
            var fail = res => {
                modal.toast({
                    message: '获取数据失败',
                    duration: 1
                })
            }
            utils.request(url, params, success, fail);
        },
        goOrderList() {
            var params = {
                path: 'orderList',
                data: ''
            }
            event.onPush(JSON.stringify(params));
        },
        goFavorite() {
            var params = {
                path: 'favorite',
                data: ''
            }
            event.onPush(JSON.stringify(params));
        },
        cart() {
            event.onPush(JSON.stringify({
                path: 'cart'
            }))
        },
        address() {
            event.onPush(JSON.stringify({
                path: 'address',
                data: JSON.stringify({
                    isEditOnly: true
                })
            }))
        },
        showWeb() {
            event.showWeb('http://www.zhen-yee.com', function() {});
        }
    }
}
</script>
<style scoped>
text {
    font-size: 32px;
}

.page {
    padding: 30px 30px 150px 30px;
}

.block {
    border-radius: 30px;
    box-shadow: 5px 5px 30px #ccc;
    padding: 40px;
    margin-bottom: 30px;
    background-color: #fff;
}

.user-info-box {
    flex-direction: row;
    align-items: center;
}

.avatar {
    width: 150px;
    height: 150px;
    border-radius: 1000px;
    overflow: hidden;
    margin-right: 30px;
}

.user-info {}

.user-name {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.user-mobile {
    background-color: #f5f5f5;
    border-radius: 1000px;
    padding: 5px 20px;
    color: #888;
    font-size: 28px;
}

.user-orders {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 30px;
}

.user-orders-item {
    flex-direction: column;
    align-items: center;
}

.user-orders-count {
    font-size: 52px;
    font-weight: bold;
    margin-bottom: 10px;
}

.user-orders-item-text {
    color: #888;
    font-size: 28px;
}

.divider {
    height: 100px;
    width: 1px;
    background-color: #000;
}

.block-title {
    font-size: 34px;
    font-weight: bold;
}
</style>